<template>
  <view class="trust-leaderboard-page">
    <!-- 排行榜组件 -->
    <TrustLeaderboard 
      :title="pageTitle"
      :subtitle="pageSubtitle"
      :showTimeFilter="true"
      :showStats="true"
      :maxItems="20"
      @user-selected="handleUserSelected"
    />
    
    <!-- 用户详情模态框 -->
    <view v-if="showUserDetail" class="user-detail-modal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">{{ selectedUser.name }} 的详情</text>
          <button class="close-btn" @click="closeUserDetail">×</button>
        </view>
        
        <view class="user-profile">
          <view class="profile-avatar">
            <text class="avatar-icon">{{ selectedUser.avatar }}</text>
            <view class="avatar-status" :class="getStatusClass(selectedUser.status)"></view>
          </view>
          <view class="profile-info">
            <text class="profile-name">{{ selectedUser.name }}</text>
            <text class="profile-title">{{ selectedUser.title }}</text>
            <view class="profile-tags" v-if="selectedUser.tags">
              <text 
                class="profile-tag" 
                v-for="tag in selectedUser.tags" 
                :key="tag"
              >{{ tag }}</text>
            </view>
          </view>
        </view>
        
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-label">信任值</text>
            <text class="stat-value">{{ selectedUser.trustValue }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">趋势</text>
            <text class="stat-value" :class="getTrendClass(selectedUser.trend)">
              {{ getTrendText(selectedUser.trend) }}
            </text>
          </view>
          <view class="stat-item">
            <text class="stat-label">状态</text>
            <text class="stat-value">{{ getStatusText(selectedUser.status) }}</text>
          </view>
        </view>
        
        <view class="user-badges" v-if="selectedUser.badges && selectedUser.badges.length > 0">
          <text class="section-title">徽章</text>
          <view class="badges-list">
            <view 
              class="badge-item" 
              v-for="badge in selectedUser.badges" 
              :key="badge.id"
              :class="badge.type"
            >
              <text class="badge-icon">{{ badge.icon }}</text>
              <text class="badge-text">{{ badge.text }}</text>
            </view>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn primary" @click="sendMessage">
            <text class="btn-text">发送消息</text>
          </button>
          <button class="action-btn secondary" @click="addFriend">
            <text class="btn-text">添加好友</text>
          </button>
        </view>
      </view>
    </view>
    
    <!-- 快速操作按钮 -->
    <view class="quick-actions">
      <button class="quick-btn" @click="refreshLeaderboard">
        <text class="btn-icon">🔄</text>
        <text class="btn-text">刷新</text>
      </button>
      
      <button class="quick-btn" @click="showSearch">
        <text class="btn-icon">🔍</text>
        <text class="btn-text">搜索</text>
      </button>
      
      <button class="quick-btn" @click="showMyRank">
        <text class="btn-icon">👤</text>
        <text class="btn-text">我的排名</text>
      </button>
    </view>
    
    <!-- 搜索模态框 -->
    <view v-if="showSearchModal" class="search-modal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">搜索用户</text>
          <button class="close-btn" @click="closeSearch">×</button>
        </view>
        
        <view class="search-input">
          <input 
            class="search-field" 
            v-model="searchQuery" 
            placeholder="输入用户名或标题"
            @input="handleSearch"
          />
        </view>
        
        <view class="search-results" v-if="searchResults.length > 0">
          <view 
            class="search-item" 
            v-for="user in searchResults" 
            :key="user.id"
            @click="selectSearchUser(user)"
          >
            <view class="search-avatar">
              <text class="avatar-icon">{{ user.avatar }}</text>
            </view>
            <view class="search-info">
              <text class="search-name">{{ user.name }}</text>
              <text class="search-title">{{ user.title }}</text>
            </view>
            <view class="search-trust">
              <text class="trust-value">{{ user.trustValue }}</text>
            </view>
          </view>
        </view>
        
        <view class="empty-search" v-if="searchQuery && searchResults.length === 0">
          <text class="empty-text">未找到相关用户</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TrustLeaderboard from '@/pages/game/trust-fall/components/trust/TrustLeaderboard.vue'
import trustLeaderboardManager from '@/utils/trust-leaderboard-manager.js'

export default {
  name: 'TrustLeaderboardPage',
  components: {
    TrustLeaderboard
  },
  
  data() {
    return {
      pageTitle: '信任排行榜',
      pageSubtitle: '看看谁最值得信任',
      showUserDetail: false,
      selectedUser: null,
      showSearchModal: false,
      searchQuery: '',
      searchResults: [],
      searchTimer: null
    }
  },
  
  onLoad() {
    this.initializePage()
  },
  
  methods: {
    // 初始化页面
    initializePage() {
      // 页面初始化逻辑
      console.log('Trust leaderboard page initialized')
    },
    
    // 处理用户选择
    handleUserSelected(user) {
      this.selectedUser = user
      this.showUserDetail = true
    },
    
    // 关闭用户详情
    closeUserDetail() {
      this.showUserDetail = false
      this.selectedUser = null
    },
    
    // 发送消息
    sendMessage() {
      if (this.selectedUser) {
        uni.showToast({
          title: `向 ${this.selectedUser.name} 发送消息`,
          icon: 'success'
        })
        // 这里可以跳转到聊天页面
        // uni.navigateTo({
        //   url: `/pages/chat/chat?userId=${this.selectedUser.id}`
        // })
      }
    },
    
    // 添加好友
    addFriend() {
      if (this.selectedUser) {
        uni.showToast({
          title: `添加 ${this.selectedUser.name} 为好友`,
          icon: 'success'
        })
        // 这里可以调用添加好友的API
      }
    },
    
    // 刷新排行榜
    refreshLeaderboard() {
      uni.showToast({
        title: '刷新中...',
        icon: 'loading'
      })
      
      // 这里可以触发排行榜组件刷新
      // 通过事件或直接调用组件方法
      setTimeout(() => {
        uni.showToast({
          title: '刷新完成',
          icon: 'success'
        })
      }, 1000)
    },
    
    // 显示搜索
    showSearch() {
      this.showSearchModal = true
      this.searchQuery = ''
      this.searchResults = []
    },
    
    // 关闭搜索
    closeSearch() {
      this.showSearchModal = false
      this.searchQuery = ''
      this.searchResults = []
    },
    
    // 处理搜索
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      
      this.searchTimer = setTimeout(async () => {
        if (this.searchQuery.trim()) {
          try {
            this.searchResults = await trustLeaderboardManager.searchUsers(this.searchQuery)
          } catch (error) {
            console.error('Search failed:', error)
            uni.showToast({
              title: '搜索失败',
              icon: 'error'
            })
          }
        } else {
          this.searchResults = []
        }
      }, 300) // 防抖
    },
    
    // 选择搜索用户
    selectSearchUser(user) {
      this.selectedUser = user
      this.showSearchModal = false
      this.showUserDetail = true
    },
    
    // 显示我的排名
    showMyRank() {
      uni.showToast({
        title: '跳转到我的排名',
        icon: 'success'
      })
      // 这里可以滚动到当前用户的位置
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        online: 'online',
        offline: 'offline',
        busy: 'busy',
        away: 'away'
      }
      return statusMap[status] || 'offline'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        online: '在线',
        offline: '离线',
        busy: '忙碌',
        away: '离开'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取趋势样式类
    getTrendClass(trend) {
      if (trend > 0) return 'up'
      if (trend < 0) return 'down'
      return 'stable'
    },
    
    // 获取趋势文本
    getTrendText(trend) {
      if (trend > 0) return `+${trend}`
      if (trend < 0) return `${trend}`
      return '0'
    }
  }
}
</script>

<style scoped>
.trust-leaderboard-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* 用户详情模态框 */
.user-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  max-width: 600rpx;
  max-height: 80vh;
  overflow-y: auto;
  color: #333;
  margin: 20rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  border-bottom: 1rpx solid #e0e0e0;
  padding-bottom: 16rpx;
}

.modal-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 用户资料 */
.user-profile {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.profile-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar-icon {
  font-size: 36rpx;
}

.avatar-status {
  position: absolute;
  bottom: -2rpx;
  right: -2rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 3rpx solid white;
}

.avatar-status.online {
  background: #4caf50;
}

.avatar-status.offline {
  background: #9e9e9e;
}

.avatar-status.busy {
  background: #f44336;
}

.avatar-status.away {
  background: #ff9800;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 6rpx;
}

.profile-title {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.profile-tags {
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap;
}

.profile-tag {
  font-size: 18rpx;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

/* 用户统计 */
.user-stats {
  display: flex;
  gap: 20rpx;
  margin-bottom: 24rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.stat-label {
  font-size: 18rpx;
  color: #666;
  display: block;
  margin-bottom: 6rpx;
}

.stat-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.stat-value.up {
  color: #4caf50;
}

.stat-value.down {
  color: #f44336;
}

.stat-value.stable {
  color: #666;
}

/* 用户徽章 */
.user-badges {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.badges-list {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}

.badge-item {
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.badge-item.achievement {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.badge-item.special {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.badge-item.vip {
  background: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
}

.badge-icon {
  font-size: 16rpx;
}

.badge-text {
  font-size: 16rpx;
}

/* 模态框操作 */
.modal-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 24rpx;
}

.action-btn {
  flex: 1;
  padding: 16rpx 24rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: #667eea;
  color: white;
}

.action-btn.primary:hover {
  background: #5a6fd8;
  transform: translateY(-2rpx);
}

.action-btn.secondary {
  background: #f5f5f5;
  color: #666;
}

.action-btn.secondary:hover {
  background: #e0e0e0;
  transform: translateY(-2rpx);
}

.btn-text {
  font-size: 18rpx;
}

/* 快速操作 */
.quick-actions {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  z-index: 100;
}

.quick-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.quick-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
}

.btn-icon {
  font-size: 32rpx;
  margin-bottom: 4rpx;
}

.btn-text {
  font-size: 18rpx;
  font-weight: bold;
}

/* 搜索模态框 */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.search-input {
  margin-bottom: 24rpx;
}

.search-field {
  width: 100%;
  padding: 16rpx 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 24rpx;
  background: white;
}

.search-results {
  max-height: 400rpx;
  overflow-y: auto;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
  margin-bottom: 8rpx;
}

.search-item:hover {
  background: #e9ecef;
  transform: translateX(4rpx);
}

.search-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-info {
  flex: 1;
}

.search-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.search-title {
  font-size: 18rpx;
  color: #666;
}

.search-trust {
  text-align: center;
}

.trust-value {
  font-size: 20rpx;
  font-weight: bold;
  color: #667eea;
}

.empty-search {
  text-align: center;
  padding: 40rpx;
  color: #999;
}

.empty-text {
  font-size: 24rpx;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .modal-content {
    margin: 16rpx;
    max-width: calc(100% - 32rpx);
  }
  
  .user-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    flex-direction: column;
    gap: 12rpx;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .quick-actions {
    bottom: 20rpx;
    right: 20rpx;
  }
  
  .quick-btn {
    width: 100rpx;
    height: 100rpx;
  }
  
  .btn-icon {
    font-size: 28rpx;
  }
  
  .btn-text {
    font-size: 16rpx;
  }
}
</style>

